<template>
  <view class="content">
    <view class="content-item">
      <view class="item-title"> 资料信息 </view>
      <view class="item-row">
        <view class="item-label">资料名称</view>
        <view class="item-value"> {{ info.name || "" }} </view>
      </view>
      <view class="item-row">
        <view class="item-label">一级类目</view>
        <view class="item-value"> {{ info.one_category || "" }} </view>
      </view>
      <view class="item-row">
        <view class="item-label">二级类目</view>
        <view class="item-value"> {{ info.two_category || "" }} </view>
      </view>
      <view class="item-row">
        <view class="item-label">创建时间</view>
        <view class="item-value"> {{ formatTime(info.add_time) }} </view>
      </view>
    </view>
    <view v-html="info.body" class="content-body" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      info_id: "", // 资料id
      info: {}, // 资料详情
    };
  },
  onLoad(e) {
    this.info_id = e.id;
    this.getDetail();
  },
  methods: {
    // 获取资料详情
    getDetail() {
      this.$https
        .get("/information/detail", {
          id: this.info_id,
        })
        .then((res) => {
          this.info = res.data;
        });
    },
    // 格式化日期
    formatTime(time) {
      if (!time) return "";
      let date = new Date(time * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let i = date.getMinutes();
      i = i < 10 ? "0" + i : i;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  min-height: calc(100vh - 56rpx);
  background-color: #fff;
  padding: 28rpx 32rpx;
  &-item {
    background-color: #ffffff;
    box-shadow: 0 0 10rpx #7dd7f7;
    border-radius: 20rpx;
    margin-top: 20rpx;
    padding: 20rpx;
    color: #141414;
    .item-title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      color: #0982af;
    }
    .item-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0;
      font-size: 28rpx;
      .item-label {
        width: 140rpx;
      }
      .item-value {
        flex: 1;
        text-align: right;
        color: #666;
      }
    }
  }
  &-body {
    margin-top: 20rpx;
  }
}
</style>
